<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../css/product.css"/>
    <title>产品</title>
</head>
<body>

<nav>
    <div class="safe">

        <img src="../img/logo.png"/>

        <div class="daohang">
            <a href="../html/index.html"><span>首页</span></a>
            <a href="../html/product.html"><span class="product">产品</span></a>
            <a href="../html/line.html"><span>系列</span></a>
            <a href="../html/aboutme.html"><span>关于品牌</span></a>
            <a href="../html/contact.html"><span>联系我们</span></a>
        </div>


    </div>
</nav>




<!--分类-->
<ul class="fenlei">
    <li data-id="all">全部</li>
    <li data-id="keting">客厅</li>
    <li data-id="bedroom">卧室</li>
    <li data-id="chufang">厨房</li>
    <li data-id="yushi">浴室</li>
</ul>

<!--内容-->
<div id="all" class="page">

    <div class="safe">

        <ul class="a">
            <li>
                <img src="../img/product1.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product5.jpg" />
                <p>贾克斯复古灯泡</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>墨绿色系列坐垫</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>粉色靠枕</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>欧式条纹储物格</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product7.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>


        <ul class="a">
            <li>
                <img src="../img/product8.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

    </div>
</div>
<div id="keting" class="page">

    <div class="safe">

        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product8.jpg" />
                <p>贾克斯复古灯泡</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>墨绿色系列坐垫</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>粉色靠枕</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>欧式条纹储物格</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product3.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>


        <ul class="a">
            <li>
                <img src="../img/product5.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

    </div>
</div>
<div id="bedroom" class="page">

    <div class="safe">

        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product5.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product7.jpg" />
                <p>贾克斯复古灯泡</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>墨绿色系列坐垫</p>
            </li>
            <li>
                <img src="../img/product5.jpg"/>
                <p>粉色靠枕</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>欧式条纹储物格</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>


        <ul class="a">
            <li>
                <img src="../img/product7.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

    </div>
</div>
<div id="chufang" class="page">

    <div class="safe">

        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product1.jpg" />
                <p>贾克斯复古灯泡</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>墨绿色系列坐垫</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>粉色靠枕</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>欧式条纹储物格</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product6.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product5.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>


        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

    </div>
</div>
<div id="yushi" class="page">

    <div class="safe">

        <ul class="a">
            <li>
                <img src="../img/product7.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product6.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product8.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product4.jpg" />
                <p>贾克斯复古灯泡</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>墨绿色系列坐垫</p>
            </li>
            <li>
                <img src="../img/product4.jpg"/>
                <p>粉色靠枕</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>欧式条纹储物格</p>
            </li>
        </ul>

        <ul class="a">
            <li>
                <img src="../img/product7.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product5.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product3.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>


        <ul class="a">
            <li>
                <img src="../img/product8.jpg" />
                <p>哑光黑极简书架</p>
            </li>
            <li>
                <img src="../img/product2.jpg"/>
                <p>设计师简约圆凳</p>
            </li>
            <li>
                <img src="../img/product1.jpg"/>
                <p>粉色贾克斯电灯</p>
            </li>
            <li>
                <img src="../img/product7.jpg"/>
                <p>裸色系列储物柜</p>
            </li>
        </ul>

    </div>
</div>


<script src="../js/product.js"></script>
</body>
</html>